<template>
  <!-- mouseenter和mouseover 当该元素没有子元素 则效果一致 -->
  <!-- 当该元素有子元素，mouseover进入本元素和其子元素都会触发事件 而mouseenter只会进入本元素才会触发，进入其子元素不会触发 -->
  <li @mouseenter="bgChange1" @mouseleave="bgChange2"  >
    <label>
      <input type="checkbox" v-model="check" />
      
      <span>{{ todo.title }}</span>
    </label>
    <span v-show="timeShow">{{ setTime }}</span>
    <button class="btn btn-danger" v-show="isShow" @click="removeItem">删除</button>
     <button class="btn btn-danger" v-show="isShow" @click="updateItem">修改</button>
  </li>
</template>

<script>
export default {
  name: 'Item-s',
  data () {
    return {
      msg:'',
      showupdate:true,
      isShow: false,
      timeShow: true
    }
  },
  methods: {
    bgChange1 (e) {
      e.target.style.backgroundColor = '#ddd'
      this.isShow = true
      this.timeShow = false
    },
    bgChange2 (e) {
      e.target.style.backgroundColor = ''
      this.isShow = false
      this.timeShow = true
    },
    removeItem () {
      this.removeTodo(this.todo.id)
    },
    updateItem () {
      this.updateTodo(this.todo.id)
    },
    // update() {
    // },
    
  },
  computed: {
    check: {
      get () {
        return this.todo.done
      },
      set (value) {
        this.isDone(value, this.todo.id)
      }
    },
    setTime () {
      return this.todo.date
    }
  },
  props: {
    todo: Object,
    removeTodo: Function,
    updateTodo: Function,
    // index: Number,
    isDone: Function
  }
}
</script>

<style lang="less" scoped>
  li{
    list-style: none;
    height: 36px;
    line-height: 36px;
    padding: 0 5px;
    border-bottom: 1px solid #ddd;
    label{
      float: left;
      cursor: pointer;
      li input{
        vertical-align: middle;
        margin-right: 6px;
        position: relative;
        top: -1px;
      }
    }

    input{
      border: none;
      outline:none;
      font-size: 125%;
    }

    button{
      float: right;
      margin-top: 3px;
    }

    >span{
      display: block;
      float: right;
    }

    &:before{
      content: initial;
    }
    &:last-child{
      border-bottom: none;
    }
  }
  .update{
    width: 200px;
    height: 300px;
    border: 1px solid red;
  }
</style>
